import React from 'react'
// ===================================================================== Temp
import SearchForm from '#cpt/temp/SearchForm'
import Controls from '#cpt/temp/Controls'
import FormModal from '#cpt/temp/FormModal'
import Input from '@antd/form/input'
// import goOutSvg from '@img/specimen-manage/goOut.svg'
// import entrantSvg from '@img/specimen-manage/entrant.svg'
// ===================================================================== global declare
const { $fn, $Lazy, $http } = window
// ===================================================================== $Lazy
const Page 		= $Lazy.load(()=>import('#tp/page/page-container'))
const Title 	= $Lazy.load(()=>import('#tp/title/title-small'))
const SaoImage 	= $Lazy.load(()=>import('#tp/sao'))
const $cache 	= $Lazy.file(()=>import('#private/cache-api'))
const confirm 	= $Lazy.file(()=>import('@antd/confirm'))
const message 	= $Lazy.file(()=>import('@antd/message'))
const SpecCodeEntrantGoOutModal 	= $Lazy.state(()=>import('./cpt/specCode-entrant-goOut-modal'))
const ExpNoEntrantGoOutModal 		= $Lazy.state(()=>import('./cpt/expNo-entrant-goOut-modal'))
const ScanCodeEntrantGoOutModal		= $Lazy.state(()=>import('./cpt/scanCode-entrant-goOut-modal'))
const ModifyTemperature		= $Lazy.state(()=>import('./cpt/modifyTemperature-modal'))
const EditModal		= $Lazy.state(()=>import('./cpt/edit-modal'))
// const DelModal		= $Lazy.state(()=>import('./cpt/del-modal'))
// ===================================================================== component

class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		selectedKeys:[],
		selectedRows:[],
		// 搜索表单列表
		forms : [
			{ label: '条码号',		name: 'spec_code'},
			{ label: '实验号',		name: 'experiment_num'},
			{ label: '状态',		name: 'status',		type: 'select',		data: [{name: '正常', value: 1}, {name: '即将过期', value: 0}, {name: '已过期', value: -1}]}
		],
		// 提交表单列表
		formData : [
			{ label: '条码号',				name: 'spec_code', 			full: true },
		]
	}
	
	uuid = $fn.query().uuid
	
	// 提交时携带的参数
	submit = {
		uuid: this.uuid,
		action: 'spec_code'
	}
	
	// 查询时携带的参数
	query = {uuid: this.uuid}
	
	componentDidMount(){
		// this.getSelect()
		this.fetch()
	}
	
	// 获取下拉数据
	getSelect = () => {
		const { forms, formData } = this.state
	
		$cache.then( async f => {
			// 所属分拣组
			const _data = await f.getCache({ api:'SortGroupSelect' })
			$fn.setRow( forms, 'gp_name', _data )
			$fn.setRow( formData, 'pick_id', _data )
			// 科室
			$fn.setRow( forms, 'project_name', await f.getCache({ api:'shi_yan_ke_shi' }) )
			this.setState({ forms, formData })
		})
	}
	
	// paging
	fetch = () => $fn.fetch.call(this,'sp-container-item/details', {callback: data => this.setState({data}) })
	
	// 操作按钮
	controls = () => {
		return [
			Controls.back.call(this),		// 返回
			// 条码入库
			Controls.click.call(this, '条码入库', () => {
				this.specCodeEntrantGoOutModal.open({uuid: this.uuid, api: 'sp-container-item/deposit', title: '批量条码入库'})
			}),
			// 条码出库
			Controls.click.call(this, '条码出库', () => {
				this.specCodeEntrantGoOutModal.open({uuid: this.uuid, api: 'sp-container-item/retrieve', title: '批量条码出库'})
			}),
			// 实验号入库
			Controls.click.call(this, '实验号入库', () => {
				this.expNoEntrantGoOutModal.open({uuid: this.uuid, api: 'sp-container-item/deposit', title: '批量实验号入库'})
			}),
			// 实验号出库
			Controls.click.call(this, '实验号出库', () => {
				this.expNoEntrantGoOutModal.open({uuid: this.uuid, api: 'sp-container-item/retrieve', title: '批量实验号出库'})
			}),
			// 扫码出入库
			// Controls.click.call(this, '扫码出入库', () => {
			// 	this.scanCodeEntrantGoOutModal.open({uuid: $fn.query().uuid})
			// }),
			// 设置温度
			// Controls.click.call(this, '设置温度', () => {
			// 	this.modifyTemperature.open({uuid: $fn.query().uuid})
			// })
		]
	}
	
	// 添加标本
	addContainer = (v) => {
		this.submit = {...this.submit, ...v}
		this.modal.open({ formRef:this.formRef })
	}
	
	// 编辑标本
	editContainer = ({spec_code}) => {
		this.editModal.open({uuid: this.uuid, spec_code})
	}
	
	// 出库标本
	delContainer = ({spec_code}) => {
		confirm.then(f=>{
			f({
				msg: '确认出库?',
				onOk: close => {
					$http.submit(this,'sp-container-item/retrieve', { param:{uuid:  this.uuid, action: 'spec_code', spec_code}}).then(data=>{
						message.then(f => f.success('出库成功'))
						this.fetch()
						close()
					})
				}
			})
		})
	}
	
	// 容器滚动
	scrollbar = (e) => {
		const left = e.target.scrollLeft
		const top = e.target.scrollTop
		this.topList.style.top = top + 'px'
		this.leftList.style.left = left + 'px'
	}
	
	// 扫码出入库
	dataEntry = (api, spec_code) => {
		$http.submit(null, api, { param: { uuid: this.uuid, spec_code, action: 'spec_code' } }).then(res => {
			message.then(f=>f.success(`操作成功`))
			this.fetch()
			spec_code = ''
		})
	}
	
	render(){
		const {conInfo, list} = this.state.data
		return (
			<>
				<Page title='容器管理' controls={this.controls()} className="rel">
					<div className='pl15 pr10 w pb10 bbor1'>
						<Title title="容器信息" />
						<div className="fx xj xm">
							<div>
								<span style={{marginRight: 20}}><b>名称：</b>{conInfo?.cn_name || '--'}</span>
								<span style={{marginRight: 20}}><b>位置：</b>{conInfo?.item_path || '--'}</span>
								<span style={{marginRight: 20}}><b>温度：</b>{conInfo?.end_temp ? `${conInfo?.start_temp} ℃ ~ ${conInfo?.end_temp} ℃` : conInfo?.start_temp ? `${conInfo?.start_temp} ℃` : '--'}</span>
							</div>
							<div className="fxj">
								<Input ref={ ref => this.putRef = ref } bordered={false} size="middle" p="请扫描或输入条码号" suffix="入库" afterSuffix={<SaoImage className="ml5 mr10"/>}
									onEnter={
										value => {
											this.dataEntry('sp-container-item/deposit', value)
											this.putRef.clear()
										}
									}
								/>
								<Input ref={ ref => this.outRef = ref } bordered={false} size="middle" p="请扫描或输入条码号" suffix="出库" afterSuffix={<SaoImage className="ml5"/>}
									onEnter={
										value => {
											this.dataEntry('sp-container-item/retrieve', value)
											this.outRef.clear()
										}
									} 
								/>
							</div>
						</div>
					</div>
					{/* 搜索 */}
					{SearchForm.call(this)}
					{/* 格子 */}
					{conInfo && (<>
					<div className="rel ex oxys scrollbar" style={{width: '100%', height: '100%', fontSize: 12}} onScroll={this.scrollbar}>
						<div className="abs" style={{marginLeft: 10, width: `calc(200px * ${parseInt(conInfo.columns)})`, backgroundColor: '#fff', zIndex: 2}} ref={ ref => this.topList = ref}>
							{[...Array(parseInt(conInfo.columns))].map((v, i) => <span key={i} style={{display: 'inline-block', textAlign: 'center', width: 200}}>{i + 1}</span> )}
						</div>
						<div className="abs fv" style={{textAlign: 'center', marginTop: 10, backgroundColor: '#fff', zIndex: 2}} ref={ ref => this.leftList = ref}>
							{[...Array(parseInt(conInfo.rows))].map((v, i) => <span key={i} style={{display: 'inline-block', height: 200, width: 20, lineHeight: 15}}>{i + 1}</span> )}
						</div>
						<div className="fx fxw" style={{width: `calc(200px * ${parseInt(conInfo.columns)} + 20px)`, padding: 10}}>
							{list && list.map((v, i) => {
								let color = '#f2f5f7'
								if (v.spec_code) {
									color = '#5cbeec'
									if(v.end_time <= 0) {
										color = '#f04e39'
									} else if (v.end_time > 0 && v.end_time <= 2){
										color = '#edb76a'
									}
									return (<div className="fv xc" key={i} style={{margin: 10, padding: 10, width: 180, height: 180, color: '#fff', fontWeight: 700, borderRadius: 5, backgroundColor: color}} onClick={() => this.delContainer(v)}>
										<div><span style={{display: 'inline-block', width: 50, textAlgin: 'left', fontWeight: 400}}>位置：</span><span>{`${v.rows} - ${v.columns}`}</span></div>
										<div><span style={{display: 'inline-block', width: 50, textAlgin: 'left', fontWeight: 400}}>条码号：</span><span>{v.spec_code}</span></div>
										<div><span style={{display: 'inline-block', width: 50, textAlgin: 'left', fontWeight: 400}}>实验号：</span><span>{v.experiment_num ? v.experiment_num : '--'}</span></div>
										<div><span style={{display: 'inline-block', width: 50, textAlgin: 'left', fontWeight: 400}}>入库：</span><span>{v.check_time.split(' ')[0]}</span></div>
										<div><span style={{display: 'inline-block', width: 50, textAlgin: 'left', fontWeight: 400}}>{v.end_time < 0 ? '过期' : '剩余'}：</span><span>{Math.abs(v.end_time)} 天</span></div>
									</div>)
								} else {
									return (<div onClick={ () => this.addContainer(v) } key={i} style={{display: 'flex', margin: 10, width: 180, height: 180, cursor: 'pointer', borderRadius: 5, fontSize: 14, backgroundColor: color}}>
										<div style={{margin: 'auto'}}>空库</div>
									</div>)
								}
							})}
						</div>
					</div>
					</>)}
				</Page>
				{/* 空库入库 */}
				{FormModal.call(this,{ title:'入库', labelWidth:'s5', width:600, api:'sp-container-item/deposit', })}
				{/* 批量条码出入库 */}
				<SpecCodeEntrantGoOutModal onRef={ref => this.specCodeEntrantGoOutModal = ref} onRefresh={this.fetch} />
				{/* 批量实验号出入库 */}
				<ExpNoEntrantGoOutModal onRef={ref => this.expNoEntrantGoOutModal = ref} onRefresh={this.fetch} />
				{/* 扫码出入库 */}
				<ScanCodeEntrantGoOutModal onRef={ref => this.scanCodeEntrantGoOutModal = ref} onRefresh={this.fetch} />
				{/* 批量设置温度 */}
				<ModifyTemperature onRef={ref => this.modifyTemperature = ref} onRefresh={this.fetch} api='sp-container-item/setting' />
				{/* 设置温度 */}
				<EditModal onRef={ref => this.editModal = ref} onRefresh={this.fetch} api='sp-container-item/setting' />
			</>
		)
	}
}

export default Index